import Https from "@/utils/Https";
import {
  PageContainer,
  ProDescriptions,
  ProTable,
} from "@ant-design/pro-components";
import { Button, Popconfirm, Spin, Tag, message, Space, Tooltip } from "antd";
import { useEffect, useRef, useState } from "react";
import { useParams, history } from "umi";
import { calcColumns2 } from "./configFile";
import styles from "./styles.less";
const ClassRoomDetails: React.FC<{}> = (props) => {
  const info = useParams();
  const [loading, setLoading] = useState(false);
  const [roomInfo, setRoomInfo] = useState({});
  const courseTypeList = { 1: "私教课", 2: "团课", 3: "班课" };
  //默认选中的列
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const actionRef = useRef();
  const getDetails = async (id) => {
    setLoading(true);
    let res = await Https.get(`/venue/classroom/roomDetail/${id}`, {}, true);
    setLoading(false);
    if (res.code == 200) {
      setRoomInfo(res.data);
    } else {
      message.error(res.msg);
    }
  };
  //获取教室时间占用列表
  const getList = async (obj) => {
    let params = {
      ...obj,
      classRoomId: info.id,
    };
    setLoading(true);
    setSelectedRowKeys([]);
    let res = await Https.get("/classRoomOccupancy/list", params, true);
    setLoading(false);
    let record = [];
    let total = 0;
    if (res.code == 200 && res.data) {
      record = res.data.records;
      total = res.data.total;
    } else {
      message.error(res.msg);
    }
    return {
      success: true,
      data: record,
      total,
    };
  };
  //获取选中的列
  const rowSelectChange = (selectedRowKeys, selectedRows, info) => {
    setSelectedRowKeys(selectedRowKeys);
  };
  const deleteItem = async (ids) => {
    let res = await Https.post("/classRoomOccupancy/delete", ids, true);
    if (res.code == 200) {
      message.success("操作成功");
      actionRef.current && actionRef.current.reload();
    } else {
      message.error(res.msg);
    }
  };
  const courseTypeOperateList = {
    1: {
      text: "私教课预约记录",
      href: "/course/personal",
      tip: "取消预约/删除",
    },
    2: {
      text: "排课表",
      href: "/course/schedule",
      tip: "删除",
    },
  };
  const operate = {
    title: "操作",
    fixed: "right",
    dataIndex: "operate",
    align: "center",
    width: 100,
    render: (id, record) => {
      return record.status == "2" || record.occupiedType == "4" ? (
        <Popconfirm
          title="确定要删除这条记录吗?"
          onConfirm={() => deleteItem([record.id])}
        >
          <Button type="link">删除</Button>
        </Popconfirm>
      ) : (
        <Tooltip
          title={
            <div>
              请到
              <a
                onClick={() => {
                  let url = courseTypeOperateList[record.occupiedType].href;
                  history.push(url);
                }}
              >
                {courseTypeOperateList[record.occupiedType].text}
              </a>
              中操作‘{courseTypeOperateList[record.occupiedType].tip}’
            </div>
          }
        >
          <Button type="link" disabled>
            删除
          </Button>
        </Tooltip>
      );
    },
  };
  useEffect(() => {
    if (info.id) {
      getDetails(info.id);
    }
  }, [info]);
  return (
    <Spin spinning={loading}>
      <PageContainer
        onBack={() => {
          history.push("/stadium/classroom");
        }}
        title="教室管理详情"
        className={styles.ClassRoomDetails}
      >
        <ProDescriptions column={3} title="基础信息">
          <ProDescriptions.Item label="教室名称">
            {roomInfo.classRoomName}
          </ProDescriptions.Item>
          <ProDescriptions.Item label="可容纳人数">
            {roomInfo.containPeopleNum}
          </ProDescriptions.Item>
          <ProDescriptions.Item label="所属场馆">
            {roomInfo.venueName}
          </ProDescriptions.Item>
          <ProDescriptions.Item label="适用课程">
            {roomInfo.courseType &&
              roomInfo.courseType
                .split(",")
                .map((item, index) => (
                  <Tag key={index}>{courseTypeList[item]}</Tag>
                ))}
          </ProDescriptions.Item>
          <ProDescriptions.Item label="教室设施">
            {roomInfo.roomFacilityList &&
              roomInfo.roomFacilityList.length > 0 &&
              roomInfo.roomFacilityList.map((item, index) => (
                <Tag key={index}>{item}</Tag>
              ))}
          </ProDescriptions.Item>
          <br />
          <ProDescriptions.Item
            style={{ width: "100%" }}
            label="备注"
            valueType="textarea"
          >
            {roomInfo.remark}
          </ProDescriptions.Item>
        </ProDescriptions>
        <ProTable
          rowKey="id"
          actionRef={actionRef}
          headerTitle="教室时间占用"
          search={false}
          request={async (params) => {
            return await getList(params);
          }}
          tableAlertRender={({ selectedRowKeys }) => {
            return (
              <Space size={24}>
                <span>
                  已选 {selectedRowKeys.length} 项
                  <a
                    style={{ marginInlineStart: 8 }}
                    onClick={() => {
                      setSelectedRowKeys([]);
                    }}
                  >
                    清空
                  </a>
                </span>
              </Space>
            );
          }}
          tableAlertOptionRender={() => {
            return (
              <Popconfirm
                title="确定要删除选中的记录吗?"
                onConfirm={() => {
                  deleteItem(selectedRowKeys);
                }}
              >
                <a>批量删除</a>
              </Popconfirm>
            );
          }}
          rowSelection={{
            onChange: rowSelectChange,
            selectedRowKeys,
            getCheckboxProps: (record) => ({
              // 根据数据项的属性动态设置选择框属性
              disabled: record.status == 1 && record.occupiedType != "4", // 禁用属性会使选择框不可点击
            }),
          }}
          pagination={{
            pageSize: 10,
            showTotal: () => "",
          }}
          columns={calcColumns2({ operate })}
        />
      </PageContainer>
    </Spin>
  );
};
export default ClassRoomDetails;
